Bonnaroo Website Redesign
The prompt:
Redesign a music festival website of your choice.
My goal for this design was to create an eye-catching yet practical website design. I selected Bonnaroo for its interesting existing branding that I felt could be emphasized.
The Pain Points
I made three user journey maps to find the existing website's pain points and explore them in detail. Doing this allowed me to ascertain what I should make sure was upgraded in my redesign.
1. Getting a Ticket
Users are taken to another site when purchasing a ticket. This is a problem because it lessens the user's interaction with the main site and is less appealing, which could lead to a higher rate of abandoned carts. In addition, the separation of each category of purchasable items will decrease the rate of purchases since each requires a lengthy process.
2. Learning about activities
The activities page offers little information on the specifics of each activity and has no encouragement offered to guide the user to make more purchases. While the layout is nice, the interaction with the user is minimal.
3. Determining Accessibility and Resources
To access the information on accessibility resources and procedures, users need to search through a couple of obscure pages to find the limited information. This is an issue because this information should be easy to find and decipher the options available to those with a disability.
Wireframes
To start the planning process I created a web map and got to work on the low-fi wireframes. I wanted to address my third problem statement by dedicating a section of the homepage information and a link to the accessibility page. After working out the lo-fi wireframes, I transferred my sketches to the computer. While the digital version was not high-fi, it was a step up from the paper versions. I began to flesh out my redesign and made a few changes here and there.
Adding in the Sparkle
Part of my goal with this redesign was to re-emphasize the visual branding. That meant integrating the brand colors more thoroughly into every page and reinforcing the theme. In addition, there were a bunch of these really cool illustrations on the existing website that only appeared on a page or two but covered the lineup poster completely. With this in mind, I really tried to emphasize these aspects in my redesign.
Adding in the Sparkle; Creating Visual Harmony
One visual aspect I placed on all the pages of my redesign is this retro rainbow in the brand colors. I really wanted to emphasize the visual harmony throughout the site, and this was one of the ways I achieved this. I placed it in the background of pages, and used it as a frame for the pop-ups.
Another way I emphasized visual harmony was with the illustration collages. The original site had this on a few of its pages, but I wanted to push it further by placing a collage at the bottom of all of the pages.
Original site
My Redesign
Adding in the Sparkle; The Tickets Page Visual Redesign
The tickets page was one of my pain points, and I made an effort to create a concise, visually appealing design.
Before- Lots of content in tabs, hard to comprehend all options because of information overload.
After- Concise explanations, vivid visual branding, can add tickets to cart right there.
Making it Move
Prototyping the website was my favorite part of the project. I made some big changes in the layout of some pages that help to engage the user more. By doing this, I addressed two of my problem statements and refined the design.
Making it Move; Multistates
I created a wide variety of buttons and sliders that have micro animations using multi states.
Making it Move; The Lineup Page
Before- The original website's lineup page is non-interactive and is just a placed image.
After- I created an interactive user interface that engages the user and encourages further exploration into the individual artists, including links to Spotify.
Making it Move; Activities Page
The activities page was one of my pain points- the information was all laid out, but not very interactive with the user. I reorganized the information and created pop-ups that provide a more interactive user experience.
Making it Move; The Loading Animation
I created a custom loading animation that used elements of the visual branding and captures the playful nature of the Bonnaroo brand ideals.
Making it Move; Email Entry Form Prototype
I created this custom email entry form prototype based on Jophin Joy's (@DesignXstream) prototype in Figma. It is in the footer of all the pages, and adds a nice touch of believability to the prototype.
Making it Move; Merchandise Cards with Multiple Buttons
There are multiple complex buttons in this one little area of the shop. There is a slider that changes the appearance of the image, a button that adds and subtracts the number of items wanted, and a button that opens an overlay that can open the cart overlay.
The World of Bonnaroo
Final Results
This project took a relatively long while to complete. The results were worth the effort, and I feel this project gave me invaluable experience in learning about the process of UX/UI designs. There were rough patches, but they were overcome with the help of others. I am pleased with how this redesign turned out, and I now have a basis for creating even greater things in the future.
Final Results; The Walkthrough
Credits
Teacher: Claudia Dubé
Brand: Bonnaroo
Inspiration:
• Jophin Joy @DesignXstream for the email entry form prototype
• S M Rony's work on LottieFiles inspired me for the loading animation
